<template>
  <text-canvas />
  <rose />
  <div>
    <audio
      id="myaudio"
      muted
      autoplay
      loop
      src="https://mp32.9ku.com/upload/128/2021/01/13/1014855.mp3"
    >
      你的浏览器不支持audio标签
    </audio>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import TextCanvas from "./components/text/TextCanvas.vue";
import Rose from "./components/rose/Rose.vue";

onMounted(() => {
  var audio = document.getElementById("myaudio");
  var t1 = 3e3; //如果是轮询，这个时间必须大于音频的长度。如果是webscoket，应该设置一个状态play，避免重复播放，如下：
  var t2 = 2500; //音频的长度，确保能够完整的播放给用户
  var play = false;
  function run() {
    if (play) {
      return false;
    }
    audio.currentTime = 0; //设置播放的音频的起始时间
    audio.volume = 0.5; //设置音频的声音大小
    audio.muted = false; //关闭静音状态
    play = true;
    // setTimeout(function(){
    //     play = false;
    //     audio.muted = true;//播放完毕，开启静音状态
    // },t2);
  }
  setInterval(function () {
    run(); //假装在轮询服务器，或者从websocket拉取数据
  }, t1);
});

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #ecf0f1;
  width: 100%;
  margin: 0;
  padding: 0;
}
</style>
